<template>
    <div>
        <!-- max-width:750px; 此宽度用于整体页面固定时-->
        <scroller v-show="!isWeChar" :lock-x="true" :lock-y="true" style="width:100%;height:46px;z-index:2;">
            <div class="order__head">
                <x-header>
                    <div slot="default" class="common__header--title">选择支付</div>
                    <div @click="goBack" slot="overwrite-left" class="common__header--img"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
                </x-header>
            </div>
        </scroller>
        <div id="order--list" class="order__list">
            <div class="policyPayList--item" :style="getProStyle(index)" v-for="(order,index) in order.payOrderList" :key="index">
                <div>
                    <div class="policyPayList__content--type">
                        支付号：{{order.paymentNo}}
                        <!-- <span :style="stateColor('7')" class="policyPayList__date--state">{{order.status |orderState}}</span> -->
                    </div>
                    <div class="policyPayList__content">
                        <span class="policyPayList__date">投保人: {{order.documentList[0].appliname}}</span>
                    </div>
                    <div v-for="(item,itIndex) in order.documentList" :key="itIndex" class="policyPayList__content" @click="getPayDetail(item)">
                        <span class="policyPayList__riskname  policyPayList__date">{{item.riskcname}}</span>
                        <span class="patOrderList__content--price">￥{{item.sumpremium}}</span>
                        <br/>
                        <!-- <span class="policyPayList__date">投保单号:{{item.proposalNo}}</span> -->
                    </div>
                    <div class="policyPayList__content">
                        <!-- <span class="policyPayList__content--type">order.riskcnam</span> -->
                        <span style="font-weight: bolder;" class="patOrderList__content--price">
                            <span style="font-weight: bolder;">总价格:</span>&nbsp￥{{order.sumPremium}}</span>
                        <br/>
                    </div>
                    <!-- <div class="policyPayList__date policyPayList__valid">
                                                                                                                                                                                                                                                    保险有效期：order.startdate 至 order.enddate
                                                                                                                                                                                                                                                </div> -->
                </div>
                <!-- <scroller lock-y :scrollbar-x="false"> -->
                <div class="common-order__btn patOrderList-item">
                    <checker radio-required class="common-classroom__checker" default-item-class="payOrder-order__item--default " selected-item-class="payOrder-order__item-selectedmessage">
                        <checker-item @click.native="goPay(order)" class="grid-center order__item" value="1">支付</checker-item>
                    </checker>
                </div>
                <!-- 支付 -->

            </div>
        </div>
        <pay-com></pay-com>
        <div v-show="order.payOrderListAlert" class="noPay--alert">没有待支付的单子</div>
    </div>
</template>
<script>
import PayCom from "src/components/PayCom";
// import ReportImmediately from "src/components/ReportImmediately";
import Config from "src/common/config/orderConfig";
import DateUtil from "src/common/util/dateUtil";
import { RequestUrl } from "src/common/url";
import { XHeader, XTable, Scroller, Cell, CellBox, CellFormPreview, Group, Badge, ButtonTab, ButtonTabItem, Divider, Checker, CheckerItem, XDialog, Alert, AlertPlugin, XButton, TransferDomDirective as TransferDom, XInput } from "vux";
import { mapState, mapActions } from "vuex";
import { Mutations, RouteUrl, SaveName, BaseService } from "src/common/const";
export default {
    components: { Scroller, XInput, Group, XDialog, Alert, AlertPlugin, XButton, TransferDom, XHeader, Cell, CellFormPreview, CellBox, Badge, ButtonTab, ButtonTabItem, Divider, XTable, Checker, CheckerItem, PayCom },
    computed: mapState(["order", "user", "isWeChar"]),
    data() {
        return {
            scrollerStyle: "position: fixed;padding-top: 44px;padding-bottom: 75px;z-index:0;",
            showEinv: false,
            results: [],
            value: "test",
            seleState: "",
            stateShow: {},
            items1: [
                {
                    key: "",
                    value: "全部"
                },
                {
                    key: "2",
                    value: "待支付"
                },
                {
                    key: "1",
                    value: "有效 "
                },
                {
                    key: "3",
                    value: "失效"
                }
            ],
            test: "1",
            orderState: [],
            seleOrder: {},
            showAnimate: true,
            prpCmainList: [],
            baseServiceName: "",
        };
    },
    watch: {
    },
    filters: {
        dateFormat(value) {
            return DateUtil.getDateStr_YmdByTs(value);
        },
        orderState(index) {
            let returnData = Config.getPolicyStateType(index);
            if (returnData == "" || typeof (returnData) == "undefined" || returnData == null || returnData == "undefined") {
                returnData = "无效";
            }
            if (["ID_CAR_MENU_BASE_SERVICE"] == BaseService.PAY) {
                return "待支付";
            }
            return returnData;
        }
    },
    methods: {
        goPay(order) {
            let documentList = order.documentList;
            let payno = "";
            let isGetpay = false;
            let payRiskCode = "";
            for (let i = 0; i < documentList.length; i++) {
                let type = documentList[i].proposalNo.substring(2, 4);
                let riskCode = documentList[i].riskcode;
                if (type == "05") {
                    if (riskCode == "0502") {
                        isGetpay = true;
                        payRiskCode = "";
                        payno = documentList[i].proposalNo
                    }
                    if (riskCode == "0508" && !isGetpay) {
                        isGetpay = true;
                        payRiskCode = "";
                        payno = documentList[i].proposalNo
                    }
                } else {
                    if (!isGetpay) {
                        payRiskCode = riskCode;
                        payno = documentList[0].proposalNo;
                    }
                    // payRiskCode = riskCode;
                    // payno = documentList[0].proposalNo;
                }

            }
            // if (this.pay.isPay) {
            let payData = {
                _this: this,
                paymentNo: payno,
                riskCode: payRiskCode
            };

            this.$common.storeCommit(this, Mutations.PAY_SET_DATA, payData);
            // if (this.pay.isPay) {
            //     let payData = {
            //         _this: this,
            //         paymentNo: this.pay.showPayData.policyno,
            //         riskCode: this.pay.showPayData.riskcode
            //     };
            //     this.$common.storeCommit(this, Mutations.PAY_SET_DATA, payData);
            // }
        },
        getPayDetail(order) {
            // this.$common.goUrl(this, RouteUrl.ORDER_DETAILS);
            // let test = this.order.menu.baseService;
            // let test2 = ["ID_CAR_MENU_BASE_SERVICE"];
            if (this.order.menu.baseService == BaseService.PAY || ["ID_CAR_MENU_BASE_SERVICE"] == BaseService.PAY) {
                let payData = {
                    order: order,
                    _this: this

                }
                this.$common.storeCommit(this, Mutations.SET_SHOW_PAY_DEFAULT, "");
                this.$common.goUrl(this, RouteUrl.PAY_DETAILS);
                this.$common.storeCommit(this, Mutations.SET_SHOW_PAY_DATA, payData);
            }
            // let payData = {
            //     _this: this,
            //     paymentNo: order.proposalNo,
            //     riskCode: order.riskcode
            // };
            // this.$common.storeCommit(this, Mutations.PAY_SET_DATA, payData);
        },
        stateColor(index) {
            let color = "#dedede"
            if (index < 9) {
                color = Config.getOrderStateColor(index);
            }
            if (this.baseServiceName == BaseService.PAY) {
                color = Config.getOrderStateColor(8);
            }
            return "color:" + color + ";border: 1px solid " + color;
        },
        getProStyle(value) {
            if (value % 2 == 0) {
                return "background-color:	#FAFAFA;";
            } else {
                return "background-color: #FFF;";
            }
        },
        goBack() {
            this.$common.goBackUrl(this, RouteUrl.SERVICE);
        },
    },
    beforeRouteEnter(to, from, next) {
        sessionStorage["POLICY_FROM_PATH"] = from.path;
        next();
    },
    // beforeRouteEnter(to, from, next) {
    //     sessionStorage["patOrderList_FORM_URL"] = from.path;
    //     next();
    // },
    // beforeMount() {
    //     if (sessionStorage["patOrderList_FORM_URL"] == "/") {
    //         this.$common.goUrl(this, RouteUrl.INDEX);
    //     }
    // },
    // beforeDestroy() {
    //     alert(1);
    // },
    mounted() {
        document.title = '选择支付';
        // if (sessionStorage[SaveName.IS_ORDER_FIND] == "F") {
        //     let findData = {
        //         isFind: false
        //     };
        //     this.$common.storeCommit(this, Mutations.SET_FIND_DATA, findData);
        // }
        // if (this.isWeChar) {
        //     this.scrollerStyle = "position: fixed;padding-top: 0px;padding-bottom: 75px;z-index:0;";
        // }
        // let queryData = {
        //     showPolicyEmail: false
        // };
        // this.$common.storeCommit(this, Mutations.SEND_POLICY_EMIAL, queryData);
        // let test = this.order.payOrderList;
        if (this.order.isPayQuery == false) {
            this.$common.storeCommit(this, Mutations.GET_PAY_DATA, this);
        }
        if (sessionStorage["POLICY_FROM_PATH"] != "/" && this.order.menu.baseService != "undefined" && typeof (this.order.menu.baseService) != "undefined") {
            sessionStorage["ID_CAR_MENU_BASE_SERVICE"] = this.order.menu.baseService;
        }
        this.baseServiceName = sessionStorage["ID_CAR_MENU_BASE_SERVICE"];
        // this.prpCmainList = this.order.prpCmainList;
        let _this = this;
        this.$init.subPageInit(this);
    }
};
</script>

<style lang="scss">
.order__head {
  position: relative;
  width: 100%; // max-width: 750px;
  height: 46px; // background-color: #f95;
  z-index: 2; //auto：默认值。浏览器允许一些手势（touch）操作在设置了此属性的元素上，例如：对视口（viewport）平移、缩放等操作。
  //none：禁止触发默认的手势操作
  //pan-x：可以在父级元素(the nearest ancestor)内进行水平移动的手势操作。
  //pan-y：可以在父级元素内进行垂直移动的手势操作。
  //manipulation：允许手势水平/垂直平移或持续的缩放。任何auto属性支持的额外操作都不支持。
  //touch-action只支持具有CSS width和height属性的元素
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}

.order__title {
  position: relative;
  height: 35px; // max-width: 750px;
  padding: 0px 20px;
  padding-bottom: 10px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
  z-index: 2; //auto：默认值。浏览器允许一些手势（touch）操作在设置了此属性的元素上，例如：对视口（viewport）平移、缩放等操作。
  //none：禁止触发默认的手势操作
  //pan-x：可以在父级元素(the nearest ancestor)内进行水平移动的手势操作。
  //pan-y：可以在父级元素内进行垂直移动的手势操作。
  //manipulation：允许手势水平/垂直平移或持续的缩放。任何auto属性支持的额外操作都不支持。
  //touch-action只支持具有CSS width和height属性的元素
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  padding-left: 12px;
}

.order__list {
  position: relative;
  width: 100%; // max-width: 750px;
  background-color: #C8161D;
}

.order__btn {
  padding: 10px 15px;
  padding-left: 0px;
  width: max-content;
  text-align: center;
  padding-top: 7px;
}

.vux-close {
  margin-top: 8px;
  margin-bottom: 8px;
}

.order__rable--content {
  font-size: 14px;
}

.order__rable--number {
  font-size: 14px;
  color: #C8161D;
}

.order__list_title {
  border: 1px solid #C8161D;
  font-size: 14px;
  color: #C8161D;
  padding: 3px 3px;
}

.classroom__checker {
  width: 100%;
}

.vux-table:after {
  border-top: 0px !important;
}

.order__serch {
  width: 100%;
  padding: 0px 4%;
  position: relative;
}

.order__serch--input {
  width: 70%;
  padding: 12px 2.5%;
  border: 0px;
  background: #f5f5f5;
  font-size: 12px;
}

input::-webkit-input-placeholder {
  color: #9c9c9c;
}

.order__serch--button {
  padding: 10.5px 4.6%;
  background: #f5f5f5;
  font-size: 14px;
  width: auto;
  color: #9c9c9c;
  height: 100%;
}

.order__btn {
  padding: 10px 15px;
  padding-left: 0px;
  width: max-content;
  text-align: center;
  padding-top: 7px;
}

.classroom__checker {
  width: 100%;
}

.order__itemmessage {
  font-size: 14px;
  padding: 5px 8px;
}

.order__item--default {
  border: 1px solid #C8161D;
  border-radius: 3px;
  color: #C8161D !important;
  margin-right: 5px;
  padding: 4px;
  font-size: 13px;
}

.policyPayList__content--name {
  font-size: 13px;
}

.noPay--alert {
  padding: 10px 0px;
  position: unset;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  color: rgb(170, 170, 170);
  opacity: 1;
  text-align: center;
}

.polictlist__item-selectedmessage {
  background-color: #C8161D;
  font-size: 12px;
  color: #fff !important;
  border-radius: 3px;
  padding: 5px 8px;
}

td {
  width: 33.3%;
}

.policyPayList--item {
  box-shadow: 0px 0px 5px 1px #ededed;
  padding: 12px;
  font-size: 14px;
  border-top: 1px solid #ededed;
  background-color: #fff;
}

.policyPayList__date--state {
  border: 1px solid #dedede;
  padding: 0px 5px;
  border-radius: 3px;
  font-size: 12px;
  float: right;
}

.policyPayList__date {
  color: #7a7a7a;
}

.policyPayList__content {
  font-size: 15px;
  padding: 0px 0;
}

.policyPayList__content--type {
  font-weight: bolder;
  margin-right: 4%;
}

.patOrderList__content--price {
  color: #C8161D;
  float: right;
}

.policyPayList__valid {
  font-size: 13px;
  padding-bottom: 0px;
}

.pay--item {
  margin-top: 10px; // border-top: 2px solid #626367;
  padding-top: 5px;
}

.patOrderList-item {
  width: 100%;
  text-align: right;
  padding-top: 5px;
}

.policyPayList__riskname {
  color: #1c86ee;
  text-decoration: underline;
}

.payOrder-order__item--default {
  border: 1px solid #c41a16;
  border-radius: 3px;
  color: #c41a16 !important;
  margin-right: 5px;
  padding: 3px 10px;
  font-size: 13px;
}

.payOrder-order__item-selectedmessage {
  margin-right: 5px;
  background-color: #f9cc9d;
  font-size: 13px;
  color: red !important;
  border-radius: 3px;
  padding: 3px 10px;
}
</style>






